/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import React, {Component} from 'react';
import SplashScreen from 'react-native-splash-screen';

// project
import {
    Page, Content, Svg, Text, Label, Image, ScrollX, ScrollY, ItemX, ItemY, Row, Header, Footer, Float, Wrap, Touch, Hand, ButtonOpacity, ButtonLight, TouchOpacity, TouchLight, Between
} from '../../library'
import HttpTemp from "../../preset/func/http/httptemp"

import { Icon, Picker, List, Switch } from 'antd-mobile-rn';

/******************************************************************************************
 * Export Class
 ******************************************************************************************/
const imgUrl = "http://image.cdn.hesq.com.cn/fuping/";

export default class CatAll extends Component {

    /*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
	constructor(props) {
        super(props);
        this.Nav = this.props.navigation;
        /**
         * state
         */
		this.state = {
            list:[]
		};
    }


    /**
     * didMount
     */
    componentDidMount(){
        HttpTemp.get({
            url:"/page/category/list.php",
            success:(res) => {
                let data = res.data;
                this.setState({
                    list:data
                })
            }
        })

    }

	/*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
	render() {

        let colnum = Math.ceil(this.state.list.length / 4);
        let col_arr = [];
        for(var i = 1; i<=colnum; i++){
            col_arr.push(i);
        }
		return (
			<Page>
                
				{/* 内容部分 */}
				<Content my='40' bg='#efeff4'>
                    {col_arr.map((itemc,indexc)=>{
                        return(
                            <Row bg='#fff' px='10' py='20' bb='solid #f0f0f0 1'>
                            {this.state.list.map((item,index)=>{
                                if(index+1 > indexc*4 && index+1 < indexc*4+5){
                                    return(
                                        <ItemY f='1' x='center'>
                                            <Image source={{uri: imgUrl+"serve/"+item.object.set_image}} w='30' h='30' mb='5' />
                                            <Text>{item.set_name}</Text>
                                        </ItemY>
                                    )
                                }
                            })}
                            </Row>
                        )
                    })}

                    {/* 更多服务标题 */}
                    {/* <Row pa='10'>
                        <Text color='#a6a6a6'>更多服务</Text>
                    </Row> */}

                    {/* 更多服务全部内容 */}
                    {/* <Row bg='#fff' px='10' py='20' bb='solid #f0f0f0 1'>
                        <ItemY f='1' x='center'>
                            <Image source={require('../../assets/cat_5.png')} w='30' h='30' mb='5' />
                            <Text>手机开门</Text>
                        </ItemY>
                        <ItemY f='1' x='center'>
                            <Image source={require('../../assets/cat_6.png')} w='30' h='30' mb='5' />
                            <Text>租车位</Text>
                        </ItemY>
                        <ItemY f='1' x='center'>
                            <Image source={require('../../assets/cat_7.png')} w='30' h='30' mb='5' />
                            <Text>车位续费</Text>
                        </ItemY>
                        <ItemY f='1' x='center'>
                            <Image source={require('../../assets/cat_8.png')} w='30' h='30' mb='5' />
                            <Text>物业续费</Text>
                        </ItemY>
                    </Row>

                    <Row bg='#fff' px='10' py='20' bb='solid #f0f0f0 1'>
                        <ItemY f='1' x='center'>
                            <Image source={require('../../assets/cat_5.png')} w='30' h='30' mb='5' />
                            <Text>健康资讯</Text>
                        </ItemY>
                        <ItemY f='1' x='center'>
                            <Image source={require('../../assets/cat_6.png')} w='30' h='30' mb='5' />
                            <Text>快递服务</Text>
                        </ItemY>
                        <ItemY f='1' x='center'>
                            <Image source={require('../../assets/cat_7.png')} w='30' h='30' mb='5' />
                            <Text>代客缴费</Text>
                        </ItemY>
                        <ItemY f='1' x='center'>
                            <Image source={require('../../assets/cat_8.png')} w='30' h='30' mb='5' />
                            <Text>家庭安防</Text>
                        </ItemY>
                    </Row>

                    <Row bg='#fff' px='10' py='20'>
                        <ItemY f='1' x='center'>
                            <Image source={require('../../assets/cat_5.png')} w='30' h='30' mb='5' />
                            <Text>智能家居</Text>
                        </ItemY>
                        <ItemY f='1' x='center'>
                            <Image source={require('../../assets/cat_6.png')} w='30' h='30' mb='5' />
                            <Text>信报箱</Text>
                        </ItemY>
                        <ItemY f='1' x='center'>
                            <Image source={require('../../assets/cat_7.png')} w='30' h='30' mb='5' />
                            <Text>社区投票</Text>
                        </ItemY>
                        <ItemY f='1' x='center'>
                            <Image source={require('../../assets/cat_8.png')} w='30' h='30' mb='5' />
                            <Text>智慧党建</Text>
                        </ItemY>
                    </Row> */}

				</Content>

                
                {/* 顶部 star */}
                <Header h='48' y='center' bg='#fff' style={{ borderBottomColor:"#eee", borderBottomWidth:1 }}>
                    <Between px='10'>
                        <TouchOpacity active={0.6} onPress={(e)=> {
                            this.Nav.goBack()
                        }}>
                            <Icon type='left' size='md' color='#00CC66' />
                        </TouchOpacity>

                        <Text size='17'>服务中心</Text>
                        <Text></Text>
                    </Between>
                </Header>
                {/* 顶部 star */}


                
				{/* 底部 */}
                {/* <Footer h='40' bg='#f7f7f7'></Footer> */}
                
			</Page>
		);
	}
}
